<!-- #layout name=blank --sideType='market'-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Hardwares</h1>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <ul class="nav nav-tabs margin-bottom-20">
            <li
              v-for="($data, $index) in types"
              :key="$index"
              :class="{ active: currentType == $data.value } "
              @click.stop.prevent="changeType($data)"
            >
              <a href="javascript:;">{{ $data.displayName }}</a>
            </li>
          </ul>
          <div class="col-md-7">
            <div class="row">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">Usage</h3>
                </div>
                <div class="panel-body">
                  <div id="report" style="height: 460px;"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title">Logs</h3>
              </div>
              <div class="panel-body row">
                <div
                  v-if="currentData"
                  class="col-md-12 block-dashboard-stat margin-bottom-10"
                >
                  <div class="row">
                    <div class="item col-md-3">
                      <div class="number">{{ currentData.month }}</div>
                      <small class="text-muted">Month</small>
                    </div>
                    <div class="item col-md-3">
                      <div class="number" :title="currentData.totalName"
                        >{{ currentData.totalName }}</div
                      >
                      <small class="text-muted">Total</small>
                    </div>
                    <div class="item col-md-3">
                      <div class="number" :title="currentData.usedName"
                        >{{ currentData.usedName }}</div
                      >
                      <small class="text-muted">Used</small>
                    </div>
                    <div class="item col-md-3">
                      <div class="number"
                        >{{ ((currentData.used / currentData.total) *
                        100).toFixed(2) + '%' }}</div
                      >
                      <small class="text-muted">Usage rate</small>
                    </div>
                  </div>
                </div>
                <table class="table Logs-table" style="margin-bottom: -10px;">
                  <thead>
                    <tr>
                      <th style="width: calc(100% - 200px)">Content</th>
                      <th style="width: 120px;">Date</th>
                      <th style="width: 80px;">Count</th>
                    </tr>
                  </thead>
                  <tbody v-if="!logsLoading">
                    <template v-if="logs.length">
                      <tr v-for="($data, $index) in logs" :key="$index">
                        <td v-kb-tooltip="$data.content"
                          >{{ $data.content }}</td
                        >
                        <td>{{ $data.date }}</td>
                        <td>{{ $data.count }}</td>
                      </tr>
                    </template>
                    <tr v-else>
                      <td colspan="3" class="text-center">No record</td>
                    </tr>
                  </tbody>
                  <tbody v-else>
                    <tr>
                      <td colspan="100" align="center">
                        <i class="fa fa-spinner fa-spin"></i>
                        <span>Loading...</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <kb-pager
                  :page-nr="pager.pageNr"
                  :total-pages="pager.totalPages"
                  @change="changePage"
                  style="float: left; margin-bottom: -20px; margin-left: 10px;"
                ></kb-pager>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .block-dashboard-stat .item {
    padding: 0 5px;
    text-align: center;
  }
</style>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/components/kbPager.js",
      "/_Admin/Scripts/lib/echarts.min.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Market/Hardware/UsageReport.js"></script>
